 <template>
  <view class="normal-login-container">
    <view class="logo-top">
      <image src="@/static/images/login/logo1.png" style="width: 84px;height: 66px;" />
    </view>
   <view class="login-form-content">
	    <uni-forms ref="baseForm" :modelValue="loginForm">
			<uni-forms-item>
				<uni-easyinput v-model="loginForm.j_username" placeholder="手机号/账户" />
			</uni-forms-item>
			<uni-forms-item>
				<uni-easyinput type='password' v-model="loginForm.j_password" placeholder="密码" />
			</uni-forms-item>
		</uni-forms>
		<view class="action-btn">
		  <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
		</view>
    </view>


  </view>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import modal from '@/plugins/modal'
	import store from '@/store' 
	import config from '@/config'
	import { loadApk } from '@/api/login.js'

	const loginForm = ref({
		j_username: "admin",
		j_password: "123456",
		isNew: '1'
	});
	
	// 登录校验
	async function handleLogin() {
	  if (loginForm.value.j_username === "") {
		modal.msgError("请输入您的账号")
		console.log("请输入您的账号")
	  } else if (loginForm.value.j_password === "") {
		modal.msgError("请输入您的密码")
		console.log("请输入您的密码")
	  } else {
		modal.loading("登录中，请耐心等待...")
	    pwdLogin()
	  }
	}
	// 登录
	async function pwdLogin() {
		store.dispatch('Login', loginForm).then(() => {
			modal.closeLoading()
			loginSuccess()
		}).catch(() => {
			modal.closeLoading()
		})
	}
	
	// 登录成功后，处理函数
	async function loginSuccess(result) {
	  // 设置用户信息
	  store.dispatch('GetInfo').then(res => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	  })
	}
	
	// 界面加载后去获取token
	onMounted(() => {
		// 挂载后的代码
		loadApk({ apkCode: config.APPID }).then((res) => {
			store.dispatch('setApkId', res[0].JE_PHONE_APK_ID)
		}).catch((e) => {
			console.log(e)
		});
	});
	
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .normal-login-container {
    width: 100%;

    .logo-top {
      width: 100%;
	  height: 410rpx;
	  background-image: url('@/static/images/login/loginbg.png');
	  background-size: cover; /* 背景图片覆盖整个元素 */
	  background-position: center; /* 背景图片居中 */
	  background-repeat: no-repeat; /* 背景图片不重复 */
	  display: flex;
	  align-items: center;
	  justify-content: center;
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      width: 80%;

      .input-item {
        margin: 20px auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;

        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
        }

      }

      .login-btn {
        margin-top: 40px;
        height: 45px;
		background-color: #536DFE;
		color: white;
		box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, 0.1); /* 向右下方偏移10px，模糊半径为5px，颜色为半透明的黑色 */
      }

      .reg {
        margin-top: 15px;
      }

      .xieyi {
        color: #333;
        margin-top: 20px;
      }

      .login-code {
        height: 38px;
        float: right;

        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }

</style>
